<template>

  <el-dialog title="网关通道集合使用情况" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
    <div v-if="data == null || data.length == 0">
        加载中...
    </div>

    <div v-if="data != null && data.length > 0">
      <h4>
        <span>网关通道集合：{{ data[0].collectionName }}&nbsp;&nbsp;|&nbsp;&nbsp;当前月：{{ data[0].month }}&nbsp;&nbsp;|&nbsp;&nbsp;当前日期：{{ data[0].day }}</span>
        <el-link type="primary" style="float: right;" @click="refresh()">刷新</el-link>
      </h4>
      <el-form ref="main-form" label-width="190px" :inline="true" >
        <div v-for="channelUsed in data">
          <h5>
            <span>{{ channelUsed.channelName }}&nbsp;|&nbsp;</span>
            <span>调度级别：{{ channelUsed.sort }}&nbsp;|&nbsp;</span>
            <span>
              状态：<i v-if="channelUsed.status == 0 || channelUsed.status == 3">关闭{{ channelUsed.statusTxt != '' ? ' (' + channelUsed.statusTxt + ' )' : '' }}</i>
              <i v-if="channelUsed.status == 1">使用中</i>
              <i v-if="channelUsed.status == 2">禁用</i>
            </span>
            <el-link v-if="channelUsed.status == 1" style="float: right;" type="danger" @click="submitStatus(channelUsed.channelId, 0)">关闭通道</el-link>
            <el-link v-if="channelUsed.status == 0" style="float: right;" type="success" @click="submitStatus(channelUsed.channelId, 1)">开启通道</el-link>
          </h5>
          <el-row>
            <el-form-item label="每笔交易限额(元)" size="mini">
              <el-input :value="channelUsed.amountLimit / 100" disabled></el-input>
            </el-form-item>  
          </el-row>
          <el-form-item label="每日交易总数限制(笔)" size="mini">
            <el-input :value="channelUsed.dayCountLimit" disabled></el-input>
          </el-form-item>
          <el-form-item label="当日交易总数(笔)" size="mini">
            <el-input :value="channelUsed.dayCurrentCount" disabled></el-input>
          </el-form-item>
          <el-form-item label="每日交易金额限制(元)" size="mini">
            <el-input :value="channelUsed.dayAmountLimit / 100" disabled></el-input>
          </el-form-item>
          <el-form-item label="当日交易总金额(元)" size="mini">
            <el-input :value="channelUsed.dayCurrentAmount / 100" disabled></el-input>
          </el-form-item>
          <el-form-item label="每月交易总数限制(笔)" size="mini">
            <el-input :value="channelUsed.monthCountLimit" disabled></el-input>
          </el-form-item>
          <el-form-item label="当月交易总数(笔)" size="mini">
            <el-input :value="channelUsed.monthCurrentCount" disabled></el-input>
          </el-form-item>
          <el-form-item label="每月交易总金额限制(元)" size="mini">
            <el-input :value="channelUsed.monthAmountLimit / 100" disabled></el-input>
          </el-form-item>
          <el-form-item label="当月交易总金额(元)" size="mini">
            <el-input :value="channelUsed.monthCurrentAmount / 100" disabled></el-input>
          </el-form-item>
          <el-row>
            <el-form-item label="每日交易总金额阈值(百分比)" size="mini">
              <el-input :value="channelUsed.dayAmountThreshold" disabled></el-input>
            </el-form-item>  
          </el-row>
          <el-row>
            <el-form-item label="每月交易总金额阈值(百分比)" size="mini">
              <el-input :value="channelUsed.monthAmountThreshold" disabled></el-input>
            </el-form-item>  
          </el-row>
        </div>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close" size="small">关 闭</el-button>
    </div>
	</el-dialog>

</template>

<script>
import ApiMain from '@/api/mch.ter';
export default {
  mixins: [
  ],
  props: [
  ],
  data () {
    return {

      dialogVisible: false,
      data: []

    }
  },

  methods: {

    show (id = null) {

      this.id = id;

      if (this.id) {
        this.fetchData();
      }

      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    fetchData () {

      ApiMain.channelUsed({ terId: this.id })
      .then(re => {
        this.data = re;
      })
      .catch(() => {
        this.data = null;
      })
      .finally(() => {
        this.renderData();
      });
    },

    renderData () {
    	console.log(this.data)
    },

    refresh () {
      this.fetchData();
      this.$message({message: '已刷新', type: 'success'});
    },

    submitStatus (channelId, status) {
      this.$confirm(status == 0 ? '确定操作关闭通道?此操作将会将该通道关闭，当日内不能产生交易' : '确定操作开启通道？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        try {
          ApiMain.channelStatus({ terId: this.id, channelId: channelId, status: status });  
        } finally {
          this.loading = false;
        }
        this.close();
        this.$message({message: '操作成功', type: 'success'});
      });
    },

  }
}
</script>